<template>
  <div class="wrapper">
    <!-- 概述 -->
    <div class="code_list">
      <div
        class="code_item"
        v-for="(item, index) in quDataAll"
        :key="index"
        @click="skip(item, index)"
        :class="index === activeIndex ? 'active' : ''"
      >
        {{ index + 1 }}
      </div>
    </div>
    <!-- 题目 -->
    <div class="article" v-html="ietmQu.article"></div>
    <div class="qu-container">
      <div v-for="(item, index) in ietmQu.quData" :key="index" class="qu_item">
        <div class="title">{{ index + 1 }}. {{ item.text }}</div>
        <div class="option">
          <el-radio-group v-model="item.radio">
            <el-radio
              v-for="(itemqu, indexqu) in item.option"
              :key="indexqu"
              :label="itemqu.code"
              >{{itemqu.code}}. {{ itemqu.qutext }}</el-radio
            >
          </el-radio-group>
        </div>
        <div class="answer_container" v-if="answerShow" :class="item.answer === item.radio?'success':'error'">正确答案: {{ item.answer }}</div>
      </div>
    </div>

    <!-- 操作 -->
    <div class="manipulate">
      <el-button type="success" class="button" @click="answerShow = true"
        >查看答案</el-button
      >
      <el-button type="primary" class="button" @click="nextqu"
        >下一题</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      quDataAll: [],
      ietmQu: {},
      activeIndex: 0,
      answerShow: false,
    };
  },
  mounted() {
    this.get_quDataFun();
  },
  methods: {
    get_quDataFun() {
      this.$axios({
        methods: "get",
        url: `../../static/data/yuedu2.json`,
      }).then((response) => {
        console.log(response)
        this.quDataAll = response.data.data;
        this.ietmQu = response.data.data[0];
      });
    },
    // 题号
    skip(row, index) {
      this.answerShow = false;
      this.activeIndex = index;
      this.ietmQu = row;
    },
    // 下一题
    nextqu() {
      if (this.activeIndex < this.quDataAll.length - 1) {
        this.activeIndex++;
        this.ietmQu = this.quDataAll[this.activeIndex];
        this.answerShow = false;
      } else {
        this.$message({
          message: "最后一题",
          type: "error",
        });
      }
    },
  },
};
</script>

<style scoped>
.answer_container{
  padding: 10px;
  color:#fff;
  margin-top: 10px;
}
.success{
  background: #409EFF;
}
.error{
  background: #F56C6C;
}
.info{
  background: #909399;
}

.wrapper {
  box-sizing: border-box;
  width: 100vw;
  overflow: hidden;
}
.article {
  text-align: left;
  border: 1px solid #eee;
  width: 80%;
  margin: 0 auto;
  padding: 10px;
  text-indent: 25px;
  line-height: 26px;
  margin-top: 10px;
}
.qu-container {
  width: 80%;
  margin: 0 auto;
  text-align: left;
  padding: 10px;
  border: 1px solid #eee;
  padding-bottom: 50px;
}
.qu_item {
  margin-top: 20px;
}
.option {
  margin-left: 20px;
  margin-top: 10px;
}
.key {
  margin-top: 6px;
}
.code_list {
  width: 100%;
  padding: 10px;
  border: 1px solid #eee;
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
.code_item {
  cursor: pointer;
  width: 40px;
  height: 40px;
  border: 1px solid #eee;
  text-align: center;
  line-height: 40px;
  margin-left: 10px;
  margin-top: 10px;
}
.active {
  background: #409eff;
  color: #fff;
}
.manipulate {
  position: fixed;
  right: 0px;
  top: 50%;
  display: flex;
  flex-direction: column;
}
.manipulate .button {
  margin-top: 10px;
}
.el-radio {
  margin-top: 20px;
  display: block;
  text-align: left;
}
</style>